<template>
  <div id="login_img">
    <div class="login_d">
      <div class="login_e">
        <div class="login_title">欢迎登陆</div>
        <el-form
          style="padding-top: 30px"
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="98px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号:" prop="name">
            <el-input v-model="ruleForm.name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              show-password
              size="small"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          class="login_dl"
          size="small"
          v-on:keydown.enter="submitForm('ruleForm')"
          @click="submitForm('ruleForm')"
          >登 录</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import "@/assets/css/login.css";

export default {
  name: "login",
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        password: "",
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    login_in() {},
    async submitForm(formName) {
      let url = this.$urls.login;
      let res = await this.$axios.post(url);
      console.log(res);
      this.$msg.General('登录失败','密码错误','error')
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     //调用自己的登录接口
      //     //this.$router.push({ path: "/user" });
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
/deep/.el-form-item__label {
  color: #fff;
  font-size: 18px;
}
/deep/ .el-input {
  width: 85%;
}
/deep/ .el-button {
  align-items: center;
}
</style>>